<template>
  <div class="app-wrapper">
    <div class="sidebar-container">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="left-logo">
          <img src="../../assets/images/logo.png" alt="" />
        </div>
        <el-menu
          :default-active="navIdx"
          show-timeout="200"
          mode="vertical"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(item, idx) in nav_list"
            :key="idx"
            :index="idx + ''"
          >
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="main-container">
      <el-menu class="navbar" id="navbar" mode="horizontal">
<!--        <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container">-->
<!--        </hamburger>-->
        <span class="sub_title">{{ nav_list[navIdx].title }}</span>
        <i class="close_icon el-icon-close" @click="closePage"></i>
      </el-menu>
      <div class="main_content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import Hamburger from "../Hamburger/index";
import {mapGetters} from "vuex";
export default {
  // components: {Hamburger},
  data() {
    return {
      navIdx: "0",
    };
  },
  props: {
    nav_list: Array,
  },
  computed: {
    ...mapGetters([
      'sidebar','nickname'
    ])
  },
  watch: {},
  created() {},
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBarDetail')
    },
    handleSelect(key) {
      this.navIdx = key;
      this.$emit('change-menu', key);
    },
    closePage() {
      window.history.go(-1);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/styles/mixin.scss";
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    z-index: 9999999;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}
.navbar {
  height: 70px;
  line-height: 70px;
  background: #fff !important;
  display: flex;
  .sub_title {
    flex: 1;
    margin-left: 20px;
  }
  .close_icon {
    margin-right: 18px;
    font-size: 30px;
    font-weight: 700;
    text-align: right;
    line-height: 70px;
  }
}
.main_content {
  min-height: calc(100vh - 71px);
  position: relative;
  overflow: auto;
  background: #fff;
}
#navbar {
  position: sticky;
  top: 0;
  z-index: 10;
}
  .el-scrollbar__thumb{
    height: 600px;
    overflow: hidden;
  }
.el-menu:last-child {
  padding-bottom: 50px;
}
</style>
